<!--
 * @Author: 赵宇
 * @Description: 
 * @Date: 2023-03-13 13:27:18
 * @LastEditTime: 2023-03-13 14:03:15
 * @LastEditors: zhao 13370229059@163.com
 * @FilePath: \pcj\src\page\form\form.vue
-->

<template>
  <div class="flexible product">
    <el-collapse-transition>
      <div v-show="status.queryShow">
        <div class="transition-box">el-collapse-transition</div>
        <div class="transition-box">el-collapse-transition</div>
      </div>
    </el-collapse-transition>
    <ul class="header-buttons">
      <li>
        <z-button title="刷新" icon="refresh" color="#40485b" @click="pageQuery"> </z-button>
        <z-button icon="add" @click="onAdd" v-if="purview(2)">新增</z-button>
        <z-button icon="delete" type="danger" :disabled="!table.selection.length" @click="onDel(table.selection.map(r => r.id))" v-if="purview(4)">
          删除
        </z-button>
      </li>
      <li class="dis-flex">
        <p>
          <el-input v-model="params.keyword" v-debounce="pageQuery" @clear="pageQuery" placeholder="支持名称模糊搜索" clearable class="mr-10"></el-input>
        </p>
        <el-button-group class="ml-10">
          <columnSetting v-model="table.columns" name="Product/GetPage" />
          <z-button icon="query" type="" title="展开通用搜索" @click="status.queryShow = !status.queryShow"></z-button>
        </el-button-group>
      </li>
    </ul>
    <el-table :data="table.data" class="flexible-table" border stripe @selection-change="onTableChange" tooltip-effect>
      <el-table-column type="selection" align="center" width="55" />
      <el-table-column type="index" label="序号" align="center" width="60" />
      <el-table-column
        v-for="(item, index) in table.columns.filter(r => r.show)"
        :width="item.width"
        :min-width="item.minWidth"
        :prop="item.id"
        :label="item.label"
        :key="item.id + index"
        show-overflow-tooltip
        align="center"
      >
        <template #default="scope">
          <template v-if="item.id === 'operate'">
            <z-button icon="xiugai" size="small" title="编辑" @click="onEdit(scope.row)" v-if="purview(3)"></z-button>
            <z-button icon="delete" type="danger" size="small" title="删除" @click="onDel([scope.row.id])" v-if="purview(4)"></z-button>
          </template>
          <template v-else>
            {{ scope.row[item.id] }}
          </template>
        </template>
      </el-table-column>
    </el-table>
    <div class="flexible-pagination">
      <el-pagination
        v-model:current-page="params.pageIndex"
        v-model:page-size="params.pageSize"
        :page-sizes="[10, 30, 60, 100]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="table.totalCount"
        @size-change="handleSizeChange"
        @current-change="pageQuery"
      />
    </div>
    <!-- <productEdit v-model="status.show" @onSave="onSaveCallback" :editData="status.editData" /> -->
  </div>
</template>
<script setup>
import { specOptions } from '@/config/data';
// import productEdit from './components/productEdit.vue';
import { post } from '@/api/index';
let { purview } = inject('$global');
let $message = inject('$message');
let router = useRouter();
let table = reactive({
  columns: [
    { label: '产品名称', id: 'productName', show: true, minWidth: 150 },
    { label: '产品编号', id: 'productSerialNo', show: true, minWidth: 180 },
    { label: '产品类型', id: 'productTypeName', show: true, width: 100 },
    { label: '产品分类', id: 'categoryName', show: true, minWidth: 100 },
    { label: '单价', id: 'price', show: true, width: 80 },
    { label: '单位', id: 'unit', show: true, width: 80 },
    { label: '预警库存', id: 'warnNumber', show: true, width: 100 },
    { label: '状态', id: 'statusName', show: true, width: 80 },
    { label: '备注', id: 'note', show: true, minWidth: 100 },
    { label: '操作', id: 'operate', show: true }
  ],
  data: [],
  totalCount: 0,
  selection: []
});
let status = reactive({
  show: false,
  editData: {},
  queryShow: false
});
let params = reactive({
  pageIndex: 1,
  pageSize: 30,
  keyword: ''
});
const pageQuery = async () => {
  let { result } = await post('Product/GetPage', params);
  table.data = result.items.map(r => {
    return {
      ...r,
      ...{
        statusName: ['禁用', '启用'][r.statusId]
      }
    };
  });
  if (result.columnJson) table.columns = JSON.parse(result.columnJson);
  table.totalCount = result.totalCount;
};

const onAdd = () => {
  router.push({
    path: 'formEdit'
  });
};
const onEdit = val => {
  status.editData = val;
  status.show = true;
};
const onDel = async val => {
  await post('Role/BulkDelete', { ids: val });
  $message.success('删除成功');
  pageQuery();
};
// 创建 保存 回调
const onSaveCallback = () => {
  pageQuery();
  status.show = false;
};
const onTableChange = val => {
  table.selection = val;
};
const onSwitchChange = async (id, item) => {
  const obj = { isEnable: '/UpdateEnable', isRequired: '/UpdateRequired' };
  await post(`CustomProductSpec${obj[item.id]}`, {
    id
  });
  $message.success('修改状态成功');
};
const handleSizeChange = val => {
  params.pageIndex = 1;
  pageQuery();
};
// 初始化
onActivated(() => {
  pageQuery();
});
</script>

<style lang="scss" scoped>
.product {
  background-color: #fff;
}
.header-buttons {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}
</style>
